<template>
  <div>
    <div class="top" @click="loginFn">
      <van-image round width="5rem" height="5rem" :src="avatar" />
      <div class="right">
        <h3>{{USER_NAME}}123</h3>
        <span>&gt;</span>
      </div>
    </div>
    <van-grid :column-num="3" square>
      <van-grid-item v-for="(item, index) in arr" :key="index" :icon="item.icon" :text="item.text" />
    </van-grid>
    <transition name="van-fade">
      <div class="login_box" v-if="modal_show">
        <div class="login_bg" @click="close_modal"></div>
        <div class="login_content">
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </transition>
    <van-tabbar v-model="active" active-color="darkred" inactive-color="#333">
      <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
 
 <script>
// // import { LoginRegisterAPI } from "@/request/api";
// var avatar = require("@/assets/avatar.png");
export default {
  data() {
    return {
      // 头像
      avatar: avatar,
      USER_NAME: "点击登录",
      arr: [
        {
          icon: "label-o",
          text: "我的订单"
        },
        {
          icon: "bill-o",
          text: "优惠券"
        },
        {
          icon: "goods-collect-o",
          text: "礼品卡"
        },
        {
          icon: "location-o",
          text: "我的收藏"
        },
        {
          icon: "flag-o",
          text: "我的足迹"
        },
        {
          icon: "contact",
          text: "会员福利"
        },
        {
          icon: "aim",
          text: "地址管理"
        },
        {
          icon: "warn-o",
          text: "账号安全"
        },
        {
          icon: "service-o",
          text: "联系客服"
        },
        {
          icon: "question-o",
          text: "帮助中心"
        },
        {
          icon: "smile-comment-o",
          text: "意见反馈"
        }
      ],
      modal_show: false,
      // 登录框的用户名和密码
      username: "",
      password: ""
    };
  },
  created() {
    // 页面创建时，获取localStorage中的avatar和username
    let userInfo1 = localStorage.getItem("userInfo");
    if (userInfo1) {
      this.avatar = JSON.parse(userInfo1).avatar;
      this.USER_NAME = JSON.parse(userInfo1).username;
    } else {
      return;
    }
  },
  methods: {
    loginFn() {
      let token = localStorage.getItem("token");
      if (token) {
        // token存在，就不打开模态框
        return;
      } else {
        // 打开模态框
        this.modal_show = true;
      }
    },
    close_modal() {
      // 关闭模态框
      this.modal_show = false;
    },
    // 点击提交按钮
    onSubmit(values) {
      let username = values["用户名"];
      let pwd = values["密码"];
      LoginRegisterAPI({
        username,
        pwd
      }).then(res => {
        if (res.errno == 0) {
          let { token, userInfo } = res.data;
          // console.log(token, userInfo)
          // 进行操作
          this.$toast("请求成功");
          // 让模态框消失
          this.close_modal();
          // 把token和userInfo存到localStorage
          localStorage.setItem("token", token);
          // 序列化
          let userInfo2 = JSON.stringify(userInfo);
          localStorage.setItem("userInfo", userInfo2);
          // 将页面重新加载
          window.location.reload();
        } else {
          this.$toast("用户名或密码错误");
        }
      });
    }
  }
};
</script>
 
<style scoped>
.top {
  background: #333;
  color: #fff;
  padding: 30px 2%;
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.right {
  margin-left: 10px;
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.login_box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 997;
}
.login_bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.login_content {
  padding-top: 10px;
  width: 90%;
  min-height: 180px;
  background: #fff;
  position: absolute;
  left: 50%;
  margin-left: -45%;
  top: 40%;
}
</style>